import Vue from 'vue'
// Vue.directive('noClick', {
//     inserted(el, binding) {
//       el.addEventListener('click', e => {
//         el.classList.add('is-disabled');
//         el.disabled = true;
//         setTimeout(() => {
//           el.disabled = false;
//           el.classList.remove('is-disabled');
//         }, binding.value || 2000)
//       })
//     }
//   });
  
// 只允许输入正整数
Vue.directive('number', {
  bind(el, binding, vnode) {
    let input = vnode.elm.children[0];
    input.addEventListener('compositionstart', () => {
      vnode.inputLocking = true
    })
    input.addEventListener('compositionend', () => {
      vnode.inputLocking = false
      input.dispatchEvent(new Event('input'))
    })
    input.addEventListener('input', () => {
      if(vnode.inputLocking) {
        return;
      }
      let oldValue = input.value;
      let newValue = input.value.replace(/[^\d]/g, '');
      if(newValue) {
        switch (binding.value) {
          case 'zeroBefore':
            break; // 数字随意输，不做处理，如 000013
          case 'zeroCan':
            newValue = Number(newValue).toString(); // 去掉开头0 正整数 + 0
            break;
          default :
            newValue = newValue.replace(/^\b(0+)/gi, ''); // （默认）去掉开头0 正整数
        }
      }
      // 判断是否需要更新，避免进入死循环
      if(newValue !== oldValue) {
        input.value = newValue
        // 通知v-model更新 vue底层双向绑定实现的原理是基于监听input事件
        input.dispatchEvent(new Event('input')) 
      }
    })
  }
});
// 只允许输入小数配合el-input 使用更佳 type值建议是text
Vue.directive("decimalNumber", {
  bind(el, binding, vnode) {
    let input = vnode.elm.children[0];
    input.addEventListener('compositionstart', () => {
      vnode.inputLocking = true
    })
    input.addEventListener('compositionend', () => {
      vnode.inputLocking = false
      input.dispatchEvent(new Event('input'))
    })
    input.addEventListener('input', () => {
      if(vnode.inputLocking) {
        return;
      }
      let oldValue = input.value;
      let newValue = input.value;
      newValue = newValue.replace(/[^\d.]/g, '');
      newValue = newValue.replace(/^\./g, '');
      newValue = newValue.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      newValue = newValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      if(newValue) {
        let arr = newValue.split('.')
        newValue = Number(arr[0]) + (arr[1] === undefined ? '' : '.' + arr[1]) // 去掉开头多余的0
      }
      // 判断是否需要更新，避免进入死循环
      if(newValue !== oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 通知v-model更新
      }
    })
    // input 事件无法处理小数点后面全是零的情况 因为无法确定用户输入的0是否真的应该清除，如3.02。放在blur中去处理
    input.addEventListener('blur', () => {
      let oldValue = input.value;
      let newValue = input.value;
      if(newValue) {
        newValue = Number(newValue).toString()
      }
      // 判断是否需要更新，避免进入死循环
      if(newValue !== oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 通知v-model更新
      }
    })
  }
});

Vue.directive('disabled', {
  inserted(el, binding) {
    if(el.innerText=='0'){
        el.classList.add('disabled');
    }else {
    el.classList.remove('disabled');
  }
  },
    componentUpdated(el, binding) {
      if(el.innerText=='0'){
        el.classList.add('disabled');
    }else {
    el.classList.remove('disabled');
  }
  }

});